<template>
  <div id="sleCategory" ref="sleCategory" class="echarts"></div>
</template>

<script>
export default {
  props: {
    echartData: {},
  },
  data() {
    return {};
  },
  components: {},
  mounted() {
    // this.echartsInit();
  },
  beforeDestroy() {},
  methods: {
    echartsInit() {
      var getmyd = this.echartData.valueArr;
      var getpm = this.echartData.areaArr;

      var myColor = [
        {
          start: "#83406b",
          end: "#ca445d",
        },
        {
          start: "#878650",
          end: "#d3b931",
        },
        {
          start: "#3194bd",
          end: "#3cb8d2",
        },
        {
          start: "#0a967f",
          end: "#03bd76",
        },
        {
          start: "#745d46",
          end: "#b46010",
        },
      ];
      this.$echarts.init(this.$refs.sleCategory).setOption({
        grid: {
          left: "20%",
          right: "10%",
          bottom: "30%",
          top: "5%",
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,0.7)",
          borderColor: "rgba(0,0,0,0.8)",
          borderWidth: 0,
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + ":" + params[0].value;
          },
        },
        xAxis: {
          name: "(条)",
          boundaryGap: false,
          nameTextStyle: {
            width: 10,
            height: 10,
            color: "#fff",
            fontSize: 12,
            verticalAlign: "top",
            padding: [9, 7, 9, 2],
          },

          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#fff",
            },
            textStyle: {
              color: "#fff",
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: "#395f88",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#395f88",
            },
          },
        },
        yAxis: [
          {
            type: "category",
            boundaryGap: false,
            inverse: true,
            position: "left",
            axisTick: {
              show: true,
            },
            axisLine: {
              show: true,
            },

            axisLabel: {
              color: "#fff",
              textStyle: {
                fontSize: 12,
                fontWeight: 400,
                rich: {
                  // #e42b36
                  // 通过富文本rich给每个项设置样式，下面的oneone、twotwo、threethree可以理解为"每一列"的样式
                  a1: {
                    color: "#DE2B35",
                    padding: [0, 13, 0, 0],
                  },
                  a2: {
                    color: "#4ADA84",
                    padding: [0, 13, 0, 0],
                  },
                  a3: {
                    color: "#E7A21E",
                    padding: [0, 13, 0, 0],
                  },
                  a4: {
                    color: "#4A92FF",
                    padding: [0, 13, 0, 0],
                  },
                  a5: {
                    color: "#4A92FF",
                    padding: [0, 13, 0, 0],
                  },
                },
              },
              formatter: (name) => {
                let index = 0;
                for (var i = 0; i < getpm.length; i++) {
                  if (getpm[i] == name) {
                    index = i;
                  }
                }
                // return `{a${index + 1}|${index + 1}} ${name}`;
                return `${name}`;
              },
            },
            data: getpm,
          },
          {
            // type: "value",
            // // name: "案件量(个)",
            // // boundaryGap : false,
            // nameTextStyle: {
            //   fontSize: 10,
            //   color: "#fff",
            // },
            // min: 20,
            // max: 100,
            // interval:20,
            // position: "right",
            // type: "value",
            // axisLabel: {
            //   show: true,
            //   textStyle: {
            //     color: "rgba(255, 255, 255,.8)",
            //     //fontSize: 18
            //   },
            // },
            // axisLine: {
            //   show: true,
            //   lineStyle: {
            //     color: "#395f88",
            //   },
            // },

            // axisTick: {
            //   show: false,
            // },
            // splitLine: {
            //   show: false,
            // },
            boundaryGap: false,
            show: true,
            inverse: true,
            data: this.echartData.valueArr,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 11, 11, 0],
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num].end;
                  // this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  //           offset: 0,
                  //           color: myColor[params.dataIndex % num].start
                  //       }, {
                  //           offset: 1,
                  //           color: myColor[params.dataIndex % num].end
                  //       }]);
                },
              },
            },
            barWidth: 15,
            data: getmyd,
            label: {
              normal: {
                show: false,
                position: ["50%", 0],
                formatter: "{c}",
                color: "#fff",
                fontSize: "14",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "#103373",
                borderColor: "transparent",
                borderWidth: 1,
                // barBorderRadius: 15,
              },
            },
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
